<template>
  <view>
      <view @click="showShadow" class="dropWrap">{{ current }}<view class="sanjiao"></view></view>
      <view class="dropdown">
        <view :class="showIf ? 'dropdown-mask' : 'undropdown-mask'" @click="hideShadow"></view>
         <view class="ul" :style="showIf ? 'height:' +list.length * 30 +'px':''">
<!--        <view class="ul" :style="'&#45;&#45;i:'+list.length" :class="showIf?'show':''">  &lt;!&ndash; 不支持就用上面那种 &ndash;&gt;-->
          <view class="li" v-for="(item, index) in list" :key="index" @click="handlerItem(item.title)">{{ item.title }}</view>
        </view>
      </view>
  </view>
</template>

<script>
    export default {
        name: 'dropdown',
        props: {
            list: {
                type: Array,
                default: () => []
            },
            current: {
                type: [String, Number],
                default: 0
            }
        },
        data() {
            return {
                showIf: false
            };
        },
        methods: {
            handlerItem(value) {
                this.showIf = false;
                this.$emit('onClick', value);
            },
            hideShadow() {
                this.showIf = false;
            },
            showShadow() {
                this.showIf = true;
            }
        }
    };
</script>

<style scoped lang="scss">
@import "../styles/global";
.dropWrap {
    box-sizing: border-box;
    width: px2rpx(96);
    height: px2rpx(50);
    //border: 1px solid #e8ecef;
    font-size: px2rpx(14);
    color: #000;
    padding: px2rpx(4) px2rpx(8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sanjiao{
      width: 0;
      height: 0;
      border-left: px2rpx(6) solid transparent;
      border-right:  px2rpx(6) solid transparent;
      border-top:  px2rpx(6) solid #C5CFD5;
      border-bottom:  px2rpx(6) solid transparent;
      transform: translateY( px2rpx(6));
    }
  }
  .dropdown {
    position: absolute;
    z-index: 100;
    .ul {
      width: px2rpx(96);
      position: relative;
      z-index: 101;
      list-style: none;
      background-color: #fff;
      border-radius: px2rpx(4);
      padding-left: 0;
      box-shadow: px2rpx(6) px2rpx(6) px2rpx(10) rgba(122, 122, 122, 0.2);
      transition: all 0.2s;
      height: 0;
      overflow: hidden;
      .li {
        box-sizing: border-box;
        color: #000;
        height: px2rpx(30);
        border-bottom: 1px solid #e6eaeb;
        font-size: px2rpx(14);
        line-height: px2rpx(30);              //与下面的高度保持一致
        padding-left: px2rpx(8);
      }
      .li:last-child {
        border-bottom: none;
      }
    }
    .show {
      height: calc( var(--i) * px2rpx(30) );   //与上面的高度保持一致
    }
    .dropdown-mask {
      top: 0;
      left: 0;
      position: fixed;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      pointer-events: auto;
    }
    .undropdown-mask {
      pointer-events: none;
    }
}
</style>
